<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header
            ><Monitor style="width: 1em; height: 1em; vertical-align: middle" />
            <span style="vertical-align: middle">基本概览</span></template
          >
          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            style="display: flex"
          >
            <el-card
              v-for="(value, key) in statisticsInfo"
              :key="key"
              style="width: 24%; margin: 0 10px"
            >
              <p>{{ key }}</p>
              <p :style="getColor(key)">{{ value }}</p>
            </el-card>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <template #header
            ><PieChart
              style="width: 1em; height: 1em; vertical-align: middle"
            />
            <span style="vertical-align: middle">成果统计</span></template
          >
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="commandstats" style="height: 420px" />
          </div>
          <p style="color: red; font-size: 14px">
            （注*：点击任务名或柱状图可切换任务详情面板）
          </p>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box" v-if="currentTaskId">
        <el-card>
          <template #header
            ><Odometer
              style="width: 1em; height: 1em; vertical-align: middle"
            />
            <span style="vertical-align: middle"
              >任务概览({{ currentTaskName }})</span
            ></template
          >
          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            v-if="currentTaskId"
            style="display: flex"
          >
            <el-card
              v-for="(value, key) in currentTaskInfo"
              :key="key"
              style="width: 24%; margin: 0 10px"
            >
              <p>{{ key }}</p>
              <p :style="getColor(key)">{{ value.数量 }}</p>
              <p :style="getColor(key)">{{ value.占比 }}</p>
            </el-card>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" class="card-box" v-if="currentTaskId">
        <el-card>
          <template #header
            ><Odometer
              style="width: 1em; height: 1em; vertical-align: middle"
            />
            <span style="vertical-align: middle"
              >成果完成情况({{ currentTaskName }})</span
            ></template
          >
          <div
            class="el-table el-table--enable-row-hover el-table--medium"
            v-if="currentTaskId"
          >
            <el-table :data="userDistributionList">
              <el-table-column
                label="序号"
                align="center"
                prop="noticeId"
                width="80"
              >
                <template #default="scope">
                  <span>{{
                    scope.$index +
                    1 +
                    (queryParams.pageNum - 1) * queryParams.pageSize
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="任务清单名称"
                align="center"
                prop="name"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="产出成果"
                align="center"
                prop="createTime"
                width="200"
              >
                <template #default="scope">
                  <span
                    @click="preview(scope.row.information)"
                    style="cursor: pointer; color: #409eff"
                    v-if="scope.row.information"
                    >{{ scope.row.information.name }}</span
                  >
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column
                label="截止日期"
                align="center"
                prop="endTime"
                width="120"
              >
                <template #default="scope">
                  <span>{{ parseTime(scope.row.endTime, "{y}-{m}-{d}") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提交人"
                align="center"
                prop="createUser"
                :show-overflow-tooltip="true"
              >
                <template #default="scope">
                  <span
                    @click="openMember(scope.row.userId)"
                    style="cursor: pointer"
                    >{{ scope.row.createUser }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="提交日期"
                align="center"
                prop="createTime"
                width="120"
              >
                <template #default="scope">
                  <span>{{
                    parseTime(scope.row.createTime, "{y}-{m}-{d}")
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                align="center"
                prop="remark"
                :show-overflow-tooltip="true"
              />
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getUserDistributionFun"
              :autoScroll="false"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <PreviewDialog
    v-model="fileDialogVisible"
    :infor="currentInfor"
  ></PreviewDialog>
  <!-- 添加或修改公告对话框 -->
  <div class="statistic-dialog">
    <el-dialog
      title="成员详情"
      v-model="memberDialogVisible"
      width="900px"
      style="text-align: left"
    >
      <el-table :data="memberInfoList">
        <el-table-column
          label="用户名"
          align="center"
          prop="nickName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="邮箱"
          align="center"
          prop="email"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="电话"
          align="center"
          prop="phonenumber"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="单位"
          align="center"
          prop="unit"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="Cache">
import { getCache } from "@/api/monitor/cache";
import PreviewDialog from "./previewDialog.vue";
import {
  getStatisticOutcome,
  getStatisticTask,
  getUserDistribution,
  getStatisticInfo,
  getTeamList
} from "@/api/home/home";
import * as echarts from "echarts";
import { getUser } from "@/api/system/user";

const cache = ref([]);
const commandstats = ref(null);
const usedmemory = ref(null);
const { proxy } = getCurrentInstance();
const props = defineProps({
  projectId: {
    type: String,
  },
});

const rawData = ref([]);
const currentTaskId = ref("");
const currentTaskName = ref("");
const currentTaskInfo = ref({});
const fileDialogVisible = ref(false);
const memberDialogVisible = ref(false);
const currentInfor = ref({});
const memberInfoList = ref([]);
const statisticsInfo = ref({});
const initFlag = ref(true);
const queryParams = ref({
  pageSize: 10,
  proId: "",
  missionId: "",
  pageNum: 1,
});
const total = ref(0);
const userDistributionList = ref([]);
//获得成果图表
function getStatisticOutcomeFun() {
  proxy.$modal.loading("正在加载统计数据！");
  getStatisticOutcome({ id: props.projectId }).then((response) => {
    proxy.$modal.closeLoading();
    cache.value = response.data;
    rawData.value = response.data.rawData;
    const commandstatsIntance = echarts.init(commandstats.value, "macarons");
    commandstatsIntance.setOption({
      legend: {},
      tooltip: {},
      dataset: {
        source: rawData.value.map((item) => {
          let i = JSON.parse(JSON.stringify(item));
          i.splice(0, 1);
          return i;
        }),
      },

      xAxis: {
        type: "category",
        triggerEvent: true,
        axisLabel: {
          show: true, // 是否显示刻度标签，默认显示
          interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
          inside: false, // 刻度标签是否朝内，默认朝外
          margin: 6, // 刻度标签与轴线之间的距离
        },
      },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { barGap: 0, type: "bar" },
        { barGap: 0, type: "bar" },
      ],
    });
    window.addEventListener("resize", () => {
      commandstatsIntance.resize();
    });
    if (initFlag.value && rawData.value.length > 1) {
      currentTaskId.value = rawData.value[1][0];
      currentTaskName.value = rawData.value[1][1];
      getStatisticTaskFun();
      getUserDistributionFun();
      initFlag.value = false;
    }
    commandstatsIntance.on("click", (params) => {
      // console.log(params);
      currentTaskId.value = rawData.value[params.dataIndex + 1][0];
      currentTaskName.value = rawData.value[params.dataIndex + 1][1];
      queryParams.value.pageNum = 1;
      getStatisticTaskFun();
      getUserDistributionFun();
    });
  });
}
//获取任务列表
function getStatisticTaskFun() {
  getStatisticTask({
    missionId: currentTaskId.value,
    proId: props.projectId,
  }).then((response) => {
    currentTaskInfo.value = response.data.xAxis;
  });
}
//获取成果列表
function getUserDistributionFun() {
  queryParams.value.proId = props.projectId;
  queryParams.value.missionId = currentTaskId.value;
  getUserDistribution(queryParams.value).then((response) => {
    userDistributionList.value = response.rows;
    total.value = response.total;
  });
}
//打开在线预览弹窗
function preview(item) {
  let fileType;
  fileType = item.name.split(".")[1];
  if (
    item.fullurl &&
    (fileType == "pdf" ||
      fileType == "mp4" ||
      fileType == "jpg" ||
      fileType == "png")
  ) {
    currentInfor.value = item;
    fileDialogVisible.value = true;
  } else {
    download(item);
  }
}
/** 下载文件 */
function download(item) {
  proxy.download(
    "/common/download",
    {
      fileName: item.url.replace("/profile/upload", ""),
      delete: false,
    },
    item.name
  );
}
//查看人员
function openMember(id) {
  proxy.$modal.loading("");
  let params = {
    userId:id,
    missionId: currentTaskId.value,
    proId: props.projectId,
  }
  getTeamList(params).then((res) => {
    proxy.$modal.closeLoading();
    memberInfoList.value = res.data;
    memberDialogVisible.value = true;
  });
}
//任务数显示
function getStatisticInfoFun() {
  getStatisticInfo({ id: props.projectId }).then((res) => {
    statisticsInfo.value = res.data;
  });
}
//获取颜色
function getColor(k) {
  if (k == "逾期任务" || k == "逾期完成" || k == "未交成果数") {
    return {
      color: "red",
      "font-size": "18px",
    };
  } else if (k == "按时完成" || k == "已交成果数") {
    return {
      color: "#0dcd0d",
      "font-size": "18px",
    };
  } else {
    return {
      color: "rgb(63, 146, 255)",
      "font-size": "18px",
    };
  }
}
getStatisticOutcomeFun();
getStatisticInfoFun();
</script>
<style lang="scss">
.statistic-dialog {
  .el-dialog {
    width: 50%;
    margin-top: 30vh !important;
    .el-dialog__body {
      height: 30vh;
      overflow-y: auto;
    }
  }
}
</style>